import { Button, Modal } from "antd"
import SecondaryHeading from "./SecondaryHeading";
import { useState } from "react";
import TextDocument from "./TextDocument";
import MarkdownRender from "../../../components/MarkdownRender";
interface Props {
    markdown: string;
    open: boolean;
    onChange: (open: boolean) => void;
}

/**
 * markdown渲染组件
 */
export default (props: Props) => {
    const { markdown, open, onChange } = props
    const [secondaryHeading, setSecondaryHeading] = useState(false)
    const [level, setLevel] = useState(1)
    const [textDocument, setTextDocument] = useState(false)

    return <><Modal open={open}
        footer={
            <>
                <Button type="primary" onClick={() => setTextDocument(true)}>语意分块</Button>
                <Button onClick={() => (setSecondaryHeading(true), setLevel(1))}>一级标题分块</Button>
                <Button onClick={() => (setSecondaryHeading(true), setLevel(2))}>二级标题分块</Button>
                <Button onClick={() => (setSecondaryHeading(true), setLevel(3))}>三级标题分块</Button>
            </>
        }
        title="查看"
        width={900}
        onClose={() => onChange(false)}
        onCancel={() => onChange(false)}>
        <div className="overflow-auto h-[600px] rounded-lg p-4" style={{ border: '1px solid #D9D9D9' }}>
            <MarkdownRender markdown={markdown} />
        </div>
        {/* 文本语意分块 */}
        <TextDocument open={textDocument} text={markdown} onClose={() => setTextDocument(false)} />
    </Modal>
        <SecondaryHeading
            level={level}
            text={markdown}
            open={secondaryHeading}
            onChange={() => setSecondaryHeading(false)}
        />
    </>
}